<template>
    <view class="home">
        <!-- <back></back> -->
        <view class="top u-flex u-row-between">
            <view class="title">新增产品</view>
            <view class="u-flex">
                <view class="radius u-flex-center" :class="signShow ? 'rad_css' : ''">
                    <u-icon name="checkmark" size="20" color="#fff" v-if="signShow"></u-icon>
                </view>
                <view class="grey">审核后直接上架</view>
            </view>
        </view>
        <view class="item it_flex">
            <view class="it_left">商品名称</view>
            <input type="text" placeholder="请输入商品名称" v-model="title" />
        </view>
        <view class="item it_flex" @click="is_cate_show = true">
            <view class="it_left">产品分类</view>
            <!-- <bararea :value="districtValue" @confirm="cateSubmit"></bararea> -->
            <view class="it_right">
                <text>{{ catename ? catename : "请选择产品分类" }}</text>
                <image class="it_lef_img" src="@/static/wImg/arrowRig.png"></image>
            </view>
        </view>
        <picker :range="postagelist" range-key="name" @change="getPostage">
            <view class="item it_flex">
                <view class="it_left">运费模版</view>
                <view class="it_right">
                    <text>{{ postagename ? postagename : "请选择是否包邮" }}</text>
                    <image class="it_lef_img" src="@/static/wImg/arrowRig.png"></image>
                </view>
            </view>
        </picker>
        <view class="item it_flex" @click="is_area_show = true">
            <view class="it_left">选择地区</view>
            <view class="it_right">
                <text>{{ areaname ? areaname : "请选择地区" }}</text>
                <image class="it_lef_img" src="@/static/wImg/arrowRig.png"></image>
            </view>
        </view>
        <view class="item item_pad_bot">
            <view class="it_left" style="margin-bottom: 30rpx">上传商品图片</view>
            <view class="u-flex u-flex-wrap it_right">
                <image
                    class="it_rig_img"
                    src="@/static/wImg/grePlus.png"
                    v-if="!cover_img"
                    @click="upshopImg"
                ></image>
                <view class="it_rig_img" style="position: relative" v-if="cover_img">
                    <image class="it_rig_img" mode="aspectFill" :src="cover_img"></image>
                    <image
                        src="../../static/yCreate/cha.png"
                        mode=""
                        class="scimg"
                        @click="cover_img = ''"
                    ></image>
                </view>
            </view>
        </view>
        <view class="item item_pad_bot">
            <view class="it_left" style="margin-bottom: 30rpx">上传商品视频</view>
            <view class="u-flex u-flex-wrap it_right">
                <image
                    class="it_rig_img"
                    src="@/static/wImg/video.png"
                    @click="chooseVideo"
                    v-if="!video"
                ></image>
                <view class="it_rig_img" style="position: relative" v-if="video">
                    <video :src="video" class="it_rig_img" controls="false"></video>
                    <image
                        src="../../static/yCreate/cha.png"
                        mode=""
                        class="scimg"
                        @click="video = ''"
                    ></image>
                </view>
                <image
                    class="it_rig_img"
                    src="@/static/wImg/grePlus.png"
                    @click="uplistImg"
                ></image>
                <view
                    class="it_rig_img"
                    style="position: relative"
                    v-for="(item, index) in imagelist"
                    :key="index"
                >
                    <image class="it_rig_img" mode="aspectFill" :src="item"></image>
                    <image
                        src="../../static/yCreate/cha.png"
                        mode=""
                        class="scimg"
                        @click="getSc(index)"
                    ></image>
                </view>
            </view>
        </view>
        <view class="item item_pad_bot" v-for="(item, index) in skuList" :key="index">
            <view class="it_tit">
                <view class="it_left">{{ item.title }}</view>
                <view class="u-flex it_grey" @click="skuDel(index)">
                    <image src="@/static/wImg/delete.png"></image>
                    删除
                </view>
            </view>
            <view class="u-flex u-flex-wrap">
                <view class="it_specs" v-for="(items, indexs) in item.skuitem" :key="indexs">
                    <input
                        type="text"
                        v-model="items.name"
                        confirm-type="done"
                        @blur="iptitSpec(indexs)"
                        @confirm="iptitSpec(indexs)"
                    />
                    <image class="it_sp_line" src="@/static/wImg/line.png"></image>
                    <image
                        class="it_sp_cha"
                        src="@/static/wImg/cha.png"
                        @click="delSpec(indexs, item.skuitem)"
                    ></image>
                </view>
                <view class="it_specs">
                    <image class="it_sp_plus" src="@/static/wImg/smaPlus.png"></image>
                    <view class="it_sp_gre" @click="addSpec(item.skuitem, index)">添加新规格</view>
                </view>
            </view>
        </view>
        <view class="item item_pad_bot" v-if="is_add_show">
            <view class="it_tit">
                <input
                    type="text"
                    placeholder="请输入规格类型"
                    confirm-type="done"
                    @blur="iptNewspec"
                    @confirm="iptNewspec"
                    v-model="newSpec"
                />
                <view class="u-flex it_grey" @click="delAdd()">
                    <image src="@/static/wImg/delete.png"></image>
                    删除
                </view>
            </view>
            <view class="u-flex u-flex-wrap">
                <view class="it_specs">
                    <image class="it_sp_plus" src="@/static/wImg/smaPlus.png"></image>
                    <view class="it_sp_gre">添加新规格</view>
                </view>
            </view>
        </view>
        <view class="item item_pad_bot">
            <view class="it_left">价格</view>
            <view class="it_right_duo" v-for="(item, index) in PricList" :key="index">
                <view class="u-flex u-flex-wrap" style="margin-top: 20rpx">
                    <view class="it_pri" v-for="(items, indexs) in item.temp" :key="indexs">{{
                        items
                    }}</view>
                </view>
                <view class="u-flex u-row-between it_rig_line">
                    <view class="it_ban u-flex">
                        <view class="it_left">商品价格</view>
                        <input type="digit" placeholder="请输入价格" v-model="item.price" />
                    </view>
                    <view class="it_ban u-flex">
                        <view class="it_left">设置库存</view>
                        <input type="number" placeholder="请输入库存" v-model="item.kuc" />
                    </view>
                </view>
                <view class="u-flex u-row-between it_rig_line">
                    <view class="it_ban u-flex">
                        <view class="it_left">商品重量</view>
                        <input type="digit" placeholder="请输入重量" v-model="item.weigh" />
                    </view>
                    <view class="it_ban u-flex">
                        <view class="it_left">划线价格</view>
                        <input
                            type="number"
                            placeholder="请输入划线价格"
                            v-model="item.market_price"
                        />
                    </view>
                </view>
            </view>
        </view>
        <view class="add u-flex-center" @click="is_add_show = true">新增规格</view>
        <view class="add btn u-flex-center" @click="getSubmit()">确认新增</view>
        <view style="height: 30rpx"></view>
        <!-- 多列选择 -->
        <view class="layer" v-if="is_cate_show" style="z-index: 9999999999">
            <view class="layer-content">
                <view
                    class="confirm-bar line-height-80 padding-lr-30 bg-ff border-bottom-ed flex align-center justify-between"
                >
                    <view class="text-cc" @click="is_cate_show = false">取消</view>
                    <view class="" style="color: #007aff" @click="cateSubmit()">确定</view>
                </view>
                <picker-view
                    :value="multiIndex"
                    :indicator-style="indicatorStyle"
                    class="picker-view"
                    @change="change"
                >
                    <picker-view-column>
                        <view
                            class="item-pircker"
                            v-for="(item, index) in catelist1"
                            :key="index"
                            >{{ item.name }}</view
                        >
                    </picker-view-column>
                    <picker-view-column v-if="catelist2">
                        <view
                            class="item-pircker"
                            v-for="(item, index) in catelist2"
                            :key="index"
                            >{{ item.name }}</view
                        >
                    </picker-view-column>
                    <picker-view-column v-if="catelist3">
                        <view
                            class="item-pircker"
                            v-for="(item, index) in catelist3"
                            :key="index"
                            >{{ item.name }}</view
                        >
                    </picker-view-column>
                </picker-view>
            </view>
        </view>
        <view class="layer" v-if="is_area_show" style="z-index: 9999999999">
            <view class="layer-content">
                <view
                    class="confirm-bar line-height-80 padding-lr-30 bg-ff border-bottom-ed flex align-center justify-between"
                >
                    <view class="text-cc" @click="is_area_show = false">取消</view>
                    <view class="" style="color: #007aff" @click="adresSubmit()">确定</view>
                </view>
                <picker-view
                    :value="multiIndex"
                    :indicator-style="indicatorStyle"
                    class="picker-view"
                    @change="changeAdres"
                >
                    <picker-view-column>
                        <view
                            class="item-pircker"
                            v-for="(item, index) in arealist1"
                            :key="index"
                            >{{ item.name }}</view
                        >
                    </picker-view-column>
                    <picker-view-column v-if="arealist2">
                        <view
                            class="item-pircker"
                            v-for="(item, index) in arealist2"
                            :key="index"
                            >{{ item.name }}</view
                        >
                    </picker-view-column>
                    <picker-view-column v-if="arealist3">
                        <view
                            class="item-pircker"
                            v-for="(item, index) in arealist3"
                            :key="index"
                            >{{ item.name }}</view
                        >
                    </picker-view-column>
                </picker-view>
            </view>
        </view>
    </view>
</template>

<script>
// import address from "@/components/w-picker/areadata/areadata.js"
export default {
    // components: {
    // 	address
    // },
    data() {
        return {
            signShow: true,
            is_add_show: false,
            skuList: [],
            newSpec: "",
            PricList: [],
            //选择分类
            catelist1: [],
            catelist2: [],
            catelist3: [],
            multiIndex: [0, 0, 0],
            multiArray: [],
            indicatorStyle: "height: 80rpx;",
            cateid: "",
            is_cate_show: false,
            catename: "",
            //邮费
            postagelist: [],
            postageid: "",
            postagename: "",
            // 城市地区
            arealist1: [],
            arealist2: [],
            arealist3: [],
            areaname: "",
            is_area_show: false,
            cover_img: "",
            coverup: "",
            video: "",
            imagelist: [],
            videolist: [],
            title: "",
            id: "",
        };
    },
    onLoad(options) {
        this.id = options.id ? options.id : "";
        if (options.id) {
            uni.setNavigationBarTitle({
                title: "修改产品",
            });
        }
    },
    onReady() {
        this.$u.post("/api/shop/get_goods_category", {}).then((res) => {
            if (res.code == 1) {
                var districtList = res.data;
                this.catelist1 = districtList;
                this.catelist2 = districtList[0].children;
                this.catelist3 = districtList[0].children[0].children;
            }
        });
        this.$u.post("/api/shop/get_logistics_list", {}).then((res) => {
            if (res.code == 1) {
                this.postagelist = res.data.data;
                if (this.id) {
                    this.$u
                        .post("/api/shop/goods_detailis", {
                            ids: this.id,
                        })
                        .then((res) => {
                            if (res.code == 1) {
                                this.title = res.data.title;
                                this.areaname = res.data.city;
                                this.skuList = res.data.spu;
                                this.PricList = res.data.sku;
                                this.cateid = res.data.category_id;
                                this.postageid = res.data.freight_id;
                                this.catename = res.data.category_name;
                                this.cover_img = res.data.image;
                                this.coverup = res.data.image;
                                this.imagelist = res.data.images;
                                this.videolist = res.data.images;
                                this.postagelist.forEach((item, index) => {
                                    if (item.id == res.data.freight_id) {
                                        this.postagename = this.postagelist[index].name;
                                    }
                                });
                                if (res.data.mp4.length > 0) {
                                    this.video = res.data.mp4[0];
                                }
                            }
                        });
                }
            }
        });
        this.$u.post("/api/index/area_list", {}).then((res) => {
            if (res.code == 1) {
                var address = res.data;
                this.arealist1 = address;
                this.arealist2 = address[0].children;
                this.arealist3 = address[0].children[0].children;
            }
        });
    },
    methods: {
        //删除
        delAdd() {
            this.newSpec = "";
            this.is_add_show = false;
        },
        // 添加新规格
        iptNewspec(e) {
            console.log(e);
            var arr = {
                title: "",
                skuitem: [],
            };
            arr.title = e.detail.value;
            this.skuList.push(arr);
            console.log(this.skuList);
            this.newSpec = "";
            this.is_add_show = false;
        },
        // 删除规格
        skuDel(index) {
            var dellist = this.skuList;
            dellist.splice(index, 1);
            console.log(dellist, "dellist");
        },
        //规格名
        iptitSpec(indexs) {
            console.log(indexs, "indexs");
            console.log(this.skuList, "规格名");
            this.getPricelist();
        },
        //添加规格名
        addSpec(skuitem, index) {
            console.log(skuitem);
            var arr = {
                name: "",
            };
            var newskuitm = skuitem;
            newskuitm.push(arr);
            for (let i = 0; i < this.skuList.length; i++) {
                if (index == i) {
                    this.skuList[i].skuitem = newskuitm;
                }
            }
            console.log(this.skuList, "sku");
        },
        //删除规格名
        delSpec(indexs, skuitem) {
            var newskuitm = skuitem;
            newskuitm.splice(indexs, 1);
            for (let i = 0; i < this.skuList.length; i++) {
                if (indexs == i) {
                    this.skuList[i].skuitem = newskuitm;
                }
            }
            console.log(this.skuList, "sku");
        },
        //生成价格列表
        getPricelist() {
            var ayy = [];

            for (let i = 0; i < this.skuList.length; i++) {
                var temp_p = [];
                for (let j = 0; j < this.skuList[i].skuitem.length; j++) {
                    if (ayy.length == 0) {
                        temp_p.push(this.skuList[i].skuitem[j].name);
                    } else {
                        for (var t = 0; t < ayy.length; t++) {
                            temp_p.push(ayy[t] + "," + this.skuList[i].skuitem[j].name);
                        }
                    }
                }
                ayy = temp_p;
            }

            this.last(ayy);
        },
        async last(ayy) {
            console.log(ayy);
            const add = {
                temp: [],
            };

            const newList = ayy.map((v, i) => {
                return {
                    temp: v.split(","),
                    price: "",
                    kuc: "",
                    weigh: "",
                    market_price: "",
                };
            });

            this.PricList = newList;
            console.log(this.PricList);
        },
        change(e) {
            let curMultiIndex = e.detail.value;
            if (curMultiIndex[0] != this.multiIndex[0]) {
                this.multiIndex = [curMultiIndex[0], 0, 0];
            } else if (curMultiIndex[1] != this.multiIndex[1]) {
                this.multiIndex = [this.multiIndex[0], curMultiIndex[1], 0];
            } else if (curMultiIndex[2] != this.multiIndex[2]) {
                this.multiIndex = [this.multiIndex[0], this.multiIndex[1], curMultiIndex[2]];
            }
            console.log(this.multiIndex);
            var i = this.multiIndex[0];
            var j = this.multiIndex[1];
            var k = this.multiIndex[2];
            this.catelist2 = this.catelist1[i].children;
            this.catelist3 = this.catelist1[i].children[j].children;

            console.log(this.cateid);
        },
        cateSubmit() {
            var i = this.multiIndex[0];
            var j = this.multiIndex[1];
            var k = this.multiIndex[2];
            if (this.catelist3.length) {
                this.catename =
                    this.catelist1[i].name +
                    "," +
                    this.catelist1[i].children[j].name +
                    "," +
                    this.catelist1[i].children[j].children[k].name;
                this.cateid = this.catelist1[i].children[j].children[k].id;
            } else if (this.catelist2.length) {
                this.catename = this.catelist1[i].name + "," + this.catelist1[i].children[j].name;
                this.cateid = this.catelist1[i].children[j].id;
            } else if (this.catelist1.length) {
                this.catename = this.catelist1[i].name;
                this.cateid = this.catelist1[i].id;
            }

            this.is_cate_show = false;
        },
        // 邮费
        getPostage(e) {
            this.postageid = this.postagelist[e.detail.value].id;
            this.postagename = this.postagelist[e.detail.value].name;
        },
        changeAdres(e) {
            let curMultiIndex = e.detail.value;
            if (curMultiIndex[0] != this.multiIndex[0]) {
                this.multiIndex = [curMultiIndex[0], 0, 0];
            } else if (curMultiIndex[1] != this.multiIndex[1]) {
                this.multiIndex = [this.multiIndex[0], curMultiIndex[1], 0];
            } else if (curMultiIndex[2] != this.multiIndex[2]) {
                this.multiIndex = [this.multiIndex[0], this.multiIndex[1], curMultiIndex[2]];
            }
            console.log(this.multiIndex);
            var i = this.multiIndex[0];
            var j = this.multiIndex[1];
            var k = this.multiIndex[2];
            this.arealist2 = this.arealist1[i].children;
            this.arealist3 = this.arealist1[i].children[j].children;
            console.log(this.cateid);
        },
        adresSubmit() {
            var i = this.multiIndex[0];
            var j = this.multiIndex[1];
            var k = this.multiIndex[2];
            this.areaname =
                this.arealist1[i].name +
                "/" +
                this.arealist1[i].children[j].name +
                "/" +
                this.arealist1[i].children[j].children[k].name;
            this.is_area_show = false;
        },
        //上传图片
        upshopImg() {
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ["original", "compressed"],
                sourceType: ["album"],
                success: (res) => {
                    if (res.tempFilePaths.length) {
                        uni.uploadFile({
                            url: "https://apishop.qiancdj.com/api/common/upload", //仅为示例，非真实的接口地址
                            filePath: res.tempFilePaths[0],
                            name: "file",
                            formData: {
                                user: "test",
                            },
                            success: (res) => {
                                this.cover_img = JSON.parse(res.data).data.fullurl;
                                this.coverup = JSON.parse(res.data).data.url;
                            },
                        });
                    }
                },
            });
        },
        chooseVideo() {
            uni.chooseVideo({
                sourceType: ["camera", "album"],
                compressed: false,
                success: (res) => {
                    uni.uploadFile({
                        url: "https://apishop.qiancdj.com/api/common/upload", //仅为示例，非真实的接口地址
                        filePath: res.tempFilePath,
                        name: "file",
                        success: (res) => {
                            console.log(res, "上传视频");
                            this.video = JSON.parse(res.data).data.fullurl;
                            this.videolist.push(JSON.parse(res.data).data.url);
                            // this.coverup = JSON.parse(res.data).data.url
                        },
                    });
                },
            });
        },
        uplistImg() {
            uni.chooseImage({
                count: 9, //默认9
                sizeType: ["original", "compressed"],
                sourceType: ["album"],
                success: (res) => {
                    console.log(res.tempFilePaths);
                    if (res.tempFilePaths.length) {
                        res.tempFilePaths.forEach((item, index) => {
                            uni.uploadFile({
                                url: "https://apishop.qiancdj.com/api/common/upload", //仅为示例，非真实的接口地址
                                filePath: item,
                                name: "file",
                                formData: {
                                    user: "test",
                                },
                                success: (res) => {
                                    console.log(res, "图片列表");
                                    this.imagelist.push(JSON.parse(res.data).data.fullurl);
                                    this.videolist.push(JSON.parse(res.data).data.url);
                                    // this.cover_img = JSON.parse(res.data).data.fullurl
                                    // this.coverup = JSON.parse(res.data).data.url
                                },
                            });
                        });
                    }
                },
            });
        },
        getSc(index) {
            var newlist = this.imagelist;
            newlist.splice(index, 1);
            this.imagelist = newlist;
        },
        getSubmit() {
            this.$u
                .post("/api/shop/add_goods", {
                    title: this.title,
                    category_id: this.cateid,
                    image: this.coverup,
                    images: this.videolist,
                    city: this.areaname,
                    freight_id: this.postageid,
                    spu: this.skuList,
                    sku: this.PricList,
                    ids: this.id,
                })
                .then((res) => {
                    if (res.code == 1) {
                        uni.showModal({
                            title: res.msg,
                            showCancel: false,
                            success() {
                                uni.navigateBack({
                                    delta: 1,
                                });
                            },
                        });
                    } else {
                        uni.showModal({
                            title: res.msg,
                            showCancel: false,
                        });
                    }
                });
        },
    },
};
</script>

<style>
page {
    width: 100%;
    padding: 0 33rpx;
    box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
.home {
    width: 100%;
    min-height: 100vh;
}
.top {
    padding: 30rpx 0;

    .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }

    .radius {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        margin-right: 10rpx;
        border: 1rpx solid #888;
    }

    .rad_css {
        background: #606dce;
        border: 1rpx solid #606dce;
    }

    .grey {
        color: #333;
        font-size: 28rpx;
    }
}

.it_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item_pad_bot {
    padding-bottom: 10rpx !important;
}

.item {
    padding: 32rpx 30rpx;
    background: #fff;
    font-size: 28rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    .it_left {
        font-weight: bold;
        color: #222;
    }

    input {
        font-size: 28rpx;
        text-align: right;
    }

    .it_right {
        display: flex;
        align-items: center;

        text {
            color: #222;
        }

        .it_lef_img {
            width: 10rpx;
            height: 20rpx;
            margin-left: 10rpx;
        }

        .it_rig_img {
            width: 220rpx;
            height: 220rpx;
            border-radius: 20rpx;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
        }
    }

    .it_right_duo {
        border-bottom: 1rpx solid #dfdfdf;

        &:last-child {
            border: none;
        }
    }

    .it_tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 30rpx;
        margin-bottom: 30rpx;
        border-bottom: 1rpx solid #f5f5f5;

        .it_grey {
            font-size: 28rpx;
            color: #888;

            image {
                width: 28rpx;
                height: 28rpx;
                margin-right: 10rpx;
            }
        }

        input {
            font-size: 28rpx;
            font-weight: bold;
            text-align: left;
        }
    }

    .it_specs {
        color: #222;
        display: flex;
        font-size: 24rpx;
        align-items: center;
        padding: 10rpx 24rpx;
        background: #f5f5f5;
        border-radius: 26rpx;
        margin-right: 30rpx;
        margin-bottom: 20rpx;

        .it_sp_line {
            width: 2rpx;
            height: 24rpx;
            margin: 0 20rpx 0 24rpx;
        }

        .it_sp_cha {
            width: 20rpx;
            height: 20rpx;
        }

        .it_sp_plus {
            width: 20rpx;
            height: 20rpx;
            margin-right: 20rpx;
        }

        .it_sp_gre {
            color: #606dce;
        }
    }

    .it_specs input {
        flex: 1;
        max-width: 60rpx;
    }

    .it_pri {
        font-size: 24rpx;
        color: #222;
        padding: 10rpx 48rpx;
        background: #f5f5f5;
        border-radius: 26rpx;
        margin-right: 30rpx;
    }

    .it_ban {
        width: 50%;
        padding: 30rpx 0;

        input {
            flex: 1;
            text-align: left;
            margin-left: 20rpx;
        }
    }
}

.add {
    width: 200rpx;
    height: 60rpx;
    font-size: 28rpx;
    color: #fff;
    margin: 0 auto;
    margin-top: 30rpx;
    background: linear-gradient(135deg, #2bb984 0%, #8cd994 100%);
    border-radius: 40rpx;
}

.btn {
    width: 630rpx;
    height: 80rpx;
    margin-top: 157rpx;
}

.layer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.layer-content {
}

/* 浮层内容 */
.confirm-bar {
    position: fixed;
    bottom: 600rpx;
    left: 0;
    width: 750rpx;
}

.line-height-80 {
    height: 80rpx;
    line-height: 80rpx;
}

.padding-lr-30 {
    padding-left: 30rpx;
    padding-right: 30rpx;
}

.bg-ff {
    background: #fff;
}

.border-bottom-ed {
    border-bottom: 1rpx solid #ededed;
}

.flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.picker-view {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 600rpx;
    background: #fff;
}

.item-pircker {
    line-height: 80rpx;
    height: 80rpx;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.scimg {
    width: 45rpx;
    height: 45rpx;
    position: absolute;
    top: -20rpx;
    right: -20rpx;
}
</style>
